<template>
  <el-main>
  <!-- 查询 -->
  <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="姓名">
          <el-input v-model="queryForm.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
	  <el-select v-model="queryForm.classesId" placeholder="请选择班级">
	      <el-option
	        v-for="item in classesList"
	        :key="item.id"
	        :label="item.name"
	        :value="item.id">
	      </el-option>
	  </el-select>
      <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
      </el-form-item>
  </el-form>
  <!-- 列表 -->
  <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
      <el-table-column
              type="selection"
              width="55">
      </el-table-column>
      <el-table-column
              prop="id"
              label="#"
              width="120">
      </el-table-column>
      <el-table-column
              prop="name"
              label="姓名"
              width="120">
      </el-table-column>
	  <el-table-column
	          label="头像"
	          width="120">
		<template slot-scope="scope">
			<img :src="'http://localhost:8100/'+scope.row.imageUrl" height="48px;"/>
		</template>
	  </el-table-column>
      <el-table-column
              prop="classes.name"
              label="所属班级"
              show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作">
          <template slot-scope="scope">
              <el-button
                      size="mini"
                      @click="edit(scope.row.id)">编辑</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="del(scope.row.id)">删除</el-button>
          </template>
      </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
      <el-button @click="add()">添加</el-button>
      <el-button @click="batchDel()">删除</el-button>
    </div>
  <!-- 分页 -->
  <el-pagination
    background
    layout="prev, pager, next"
	@current-change="gotoPage"
    :page-count="pagecount">
  </el-pagination>
  </el-main>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
		queryForm:{
			pageNum:1,
			pageSize:1
		},
		classesList:[],
		pagecount:1,
		idsStr:"",
		idsArr:[]
      }
    },
	methods:{
		handleSelectionChange(rows){	
			// console.log(row);
			let ids = rows.map(row=>row.id);
			// console.log(ids);
			this.idsStr = ids.join();
			this.idsArr = ids;
		},
		add(){
			this.$router.push("/update/0");
		},
		edit(id){
			this.$router.push("/update/"+id);
		},
		getList(){
			let self = this;
			console.log(this.queryForm);
			this.axios.get("http://localhost:8100/student/list",{params:this.queryForm})
			.then(function(res){
				console.log("res:",res);
				self.tableData = res.data.content;
				self.pagecount=res.data.totalPages;
			})
		},
		del(id){
			let self = this;
			console.log(id);
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					this.axios.post("http://localhost:8100/student/deleteById",{id:id})
					.then(function(res){
						console.log("res:",res);
						self.$message({
							type: 'success',
							message: '删除成功!'
						});
						self.queryForm.pageNum=1;
						self.getList();
					})
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});
			
		},
		batchDel(){
			let ids = this.idsStr;
			if(ids.length<=0){
				this.$message("请选择要删除的数据");
				return;
			}
			let self = this;
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					this.axios.post("http://localhost:8100/student/deleteByIdsStr",null,{params:{ids:ids}})
					.then(function(res){
						console.log(res);
						self.$message({
							type: 'success',
							message: '删除成功!'
						});
						self.queryForm.pageNum=1;
						self.getList();
					})
				  
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});
			
			
		},
		query(){
			this.queryForm.pageNum=1;
			this.getList();
		},
		gotoPage(pageNum){
			console.log(pageNum);
			this.queryForm.pageNum=pageNum;
			this.getList();
		}
	},
	created() {
		this.getList();
		let self = this;
		this.axios.get("http://localhost:8100/student/getClassesAll",{})
		.then(function(res){
			console.log("res:",res);
			self.classesList = res.data;
		})
	}
  }
</script>
<style>
</style>
